<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
   
    <style>
      tbody{
        background-color: rgb(211, 219, 206);
       
     
      }
      tr{
        margin-left: 200px;
      }
      td{
        width:180px;
        height: 30px;
        text-align: center;
      }
   body{
     
     margin-left: 200px;
     background-image: url(./e2f7e9163fdd4e4dab6568611f3d1f73.jpeg);
     background-repeat: no-repeat;
     background-position:150px;
   }
   .ye{
     
     margin-left: 200px;
     margin-top: 20px;
   }
  .bu{
    width: 50px;
    height: 50px;
    border-radius: 50px;
  }
    </style>
  </head>
  <body>
    <div class="ye">
    <!-- <audio src="https://music.163.com/song/media/outer/url?id=${id}.mp3" controls></audio> -->

      <input type="text"  id="keywords" placeholder="搜索歌曲" value="">
      <button  id="send">搜索</button>
      <button  id="sen">清空</button>
    </div>
    

      <div class="ye">
          <audio id="player" src="" controls></audio>
          <button class="bu">播放</button>
      </div>

      <table class="table table-bordered">
          <thead>
              <td>音乐标题</td>
              <td>歌手</td>
              <td>专辑</td>
              <td>时长</td>
          </thead>
           <tbody>
          </tbody>
      </table>
      <div style="margin: 50px 0 0 300px;" class="ye">
        <button class="btn btn-info content disable" id="prev">上一页</button>
        <button class="btn btn-info content disable" id="next">下一页</button>
    </div>
  </body>
  <script>
var a=0;
  var tbody=document.querySelector("tbody")//表格
  var prev=document.querySelector("#prev")//上一页
  var next=document.querySelector("#next")//下一页
  var send=document.querySelector("#send")//搜索
  var sen=document.querySelector("#sen")//清空
  var bu=document.querySelector(".bu")//歌曲播放
  var player=document.querySelector("#player")//歌曲地址
  var inp=document.querySelector("input")//input框
 var player=document.querySelector("#player")
  console.log(inp.value);

  //ajax封装函数
    function _ajaxTool(method, url, data, cb) { 
  let xhr = new XMLHttpRequest();
  if (method == "GET") {
    //  对data进行操作形成新的url
    let a = "";
    for (const key in data) {
      a += `${key}=${data[key]}&`;
    }
    let newUrl = `${url}?${a.slice(0, -1)}`;
    xhr.open(method, newUrl);
   xhr.send()
  } else {
    let postData = "";
    xhr.open(method, url);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // 对data进行操作形成新的字符串
    for (const key in data) {
      postData += `${key}=${data[key]}&`;
    }
    postData = postData.slice(0, -1);
    xhr.send(postData);
  }
  xhr.addEventListener("readystatechange", function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        cb(JSON.parse(xhr.responseText));
      }
    }
  });
}
let getUrl = "http://netease.0melon0.cn/search";
let methodPost = "POST";
let methodGet = "GET";
let getData={
  limit:10,
  offset:0
}
//歌曲播放
tbody.addEventListener("click",function(e){
 let songid=e.target.parentNode.getAttribute("data-id");
 player.src=`https://music.163.com/song/media/outer/url?id=${songid}.mp3`
 console.log(songid);
 player.play()


})

//点击搜索
send.addEventListener("click",add)
//点击清除
sen.addEventListener("click",function(){
  tbody.innerHTML=""
})
//下一页
next.addEventListener("click",function(e){
  tbody.innerHTML=""
getData.offset+=10
add()
})
//上一页
prev.addEventListener("click",function(e){
  tbody.innerHTML=""
getData.offset-=10
add()
})



function add(){

 getData.keywords=inp.value,
_ajaxTool(methodGet, getUrl, getData, function (data) {
  console.log(data);

if(getData.keywords=inp.value){
   tbody.innerHTML=""
}
//添加歌曲名单
  data.result.songs.forEach((ele) => {
tbody.innerHTML+=`<tr data-id="${ele.id}">
                      <td>${ele.name}</td>
                      <td>${ele.artists[0].name}</td>
                      <td>${ele.album.name}</td>
                      <td>${formateTime(ele.duration)}</td>
                      
  
  </tr>`
  
});
//规范时间
function formateTime(num) {
        num /= 1000;
        let m = Math.floor(num / 60);
        let s = Math.floor(num % 60);
        s < 10 ? (s = "0" + s) : s;
        return m + ":" + s;
      }
});
}



  </script>
</html>
